<template>
	<view class="card-ticket" >
		
		<view class="card-ticket-title f-side zcRelative"> <view class="flex title"> <view class="f-center"><image src="../../static/ticket.png" mode=""></image></view>30元洗车券</view><view class="iconfont"></view></view>
		<view class="flex card-ticket-text"><view>有效期：</view><view>2019-11-1~2019-11-10</view></view>
		<view class="flex card-ticket-text"><view>使用说明：</view><view>说明轮胎换</view></view>
	</view>
</template>

<script>
	export default{
		props:{
			
		},
		methods:{
			
		}
	}
</script>

<style>
	.card-ticket{
		padding: 10upx 20upx 20upx 20upx;
		margin: 0 35upx 25upx 35upx;
		background-color: #fff;
			box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
	}
	.card-ticket>.card-ticket-title{
		height: 80upx;
		line-height: 80upx;
		margin-bottom: 10upx;
		border-bottom: 2upx dashed #F3F3F3;
	}
	.card-ticket>.card-ticket-title:before,.card-ticket>.card-ticket-title:after{
		content: "";
		position: absolute;
		width: 65upx;
		height: 65upx;
		border-radius: 50%;
		background-color: #F5F5F5;
	  top:42upx
	}
	.card-ticket>.card-ticket-title:before{
		left: -45upx ;
	}
	.card-ticket>.card-ticket-title:after{
		right: -45upx ;
	}
	.card-ticket>view{
			padding: 0 40upx;
	}
	.card-ticket-text>view:nth-of-type(1){
		flex: 0 0 140upx;
		color: #9B9B9B;
	}
	.card-ticket-title image{
		width:40upx ;
		height: 45upx;
		position: relative;
		left:-10upx
	}
	.title{
		color:#FEC388 ;
	}
	.card-ticket{
		background-image: url("../../static/ticket-not-use-2019-11-6.png") ;
		background-size: 100% 100%;
	}
</style>
